<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="#{groups.title}">Consumer Groups - SnackMQ Console</title>
    <link rel="stylesheet" href="/css/groups.css">
</head>
<body>
<section>
    <div class="d-flex justify-content-between align-items-center flex-wrap mb-4 gap-2">
        <h4 class="mb-0" th:text="#{groups.consumer.groups}">Consumer Groups</h4>
        <!-- 新增：实时更新状态指示器 -->
        <div id="refresh-status" class="text-muted small align-self-center">
            <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
            <span th:text="#{dashboard.live.update}">Live Update</span>
        </div>
    </div>

    <div th:if="${error}" class="alert alert-danger" role="alert" th:text="#{groups.error.loading}">
        Error loading data.
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover shadow-sm border-0 rounded">
            <thead class="table-dark">
            <tr>
                <th style="width: 30px;"></th> <!-- 新增：展开/折叠按钮列 -->
                <th th:text="#{groups.group.name}">Group Name</th>
                <th th:text="#{groups.total.lag}">Total Lag</th>
                <!-- 移除分区详情列标题 -->
            </tr>
            </thead>
            <!-- 修改：为 tbody 增加 id，方便 JS 操作 -->
            <tbody id="group-table-body">
            <!-- 初始内容由 Thymeleaf 渲染，后续由 JS 更新 -->
            <!-- 修改：合并主行和子行循环 -->
            <th:block th:each="group : ${groups}">
                <!-- 主表格行 -->
                <tr class="group-row">
                    <td><button class="btn btn-sm p-0 toggle-subtable"><i class="bi bi-chevron-right"></i></button></td>
                    <td th:text="${group.groupName}">my-consumer-group</td>
                    <td th:text="${group.totalLag}">0</td>
                </tr>
                <!-- 子表格行 -->
                <tr class="subtable-row d-none">
                    <td colspan="3" class="p-0">
                        <div class="border-top border-bottom p-3 bg-light">
                            <div class="table-responsive">
                                <table class="table table-sm table-borderless mb-0">
                                    <thead>
                                        <tr class="table-secondary">
                                            <th th:text="#{groups.topic.partition}">Topic:Partition</th>
                                            <th th:text="#{groups.committed.offset}">Committed Offset</th>
                                            <th th:text="#{groups.high.watermark}">High Watermark</th>
                                            <th th:text="#{groups.partition.lag}">Partition Lag</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="lag : ${group.partitionLags ?: #lists.emptyList()}">
                                            <td th:text="${lag.topicPartition}">topic-1:0</td>
                                            <td th:text="${lag.committedOffset}">100</td>
                                            <td th:text="${lag.highWatermark}">150</td>
                                            <td th:text="${lag.lag}" th:classappend="${lag.lag > 1000 ? 'text-danger fw-bold' : ''}">50</td>
                                        </tr>
                                        <tr th:if="${group.partitionLags == null or #lists.isEmpty(group.partitionLags)}">
                                            <td colspan="4" class="text-center text-muted italic" th:text="#{groups.no.partition.data}">No partition data available</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </th:block>
            <tr th:if="${#lists.isEmpty(groups)}">
                <td colspan="3" class="text-center" th:text="#{groups.no.groups}">No active consumer groups found.</td>
            </tr>
            </tbody>
        </table>
    </div>
    
    <!-- 隐藏的i18n字符串，供JavaScript使用 -->
    <div id="i18n-strings" style="display: none;">
        <span data-i18n="dashboard.live.update" th:text="#{dashboard.live.update}">Live Update</span>
        <span data-i18n="groups.update.failed" th:text="#{groups.update.failed}">Update Failed</span>
        <span data-i18n="groups.no.groups" th:text="#{groups.no.groups}">No active consumer groups found.</span>
        <span data-i18n="groups.topic.partition" th:text="#{groups.topic.partition}">Topic:Partition</span>
        <span data-i18n="groups.committed.offset" th:text="#{groups.committed.offset}">Committed Offset</span>
        <span data-i18n="groups.high.watermark" th:text="#{groups.high.watermark}">High Watermark</span>
        <span data-i18n="groups.partition.lag" th:text="#{groups.partition.lag}">Partition Lag</span>
    </div>
    
    <th:block th:replace="~{fragments/js/groups-js}"></th:block>
</section>
</body>
</html>